<template>
	<view class="wrap">
		<view class="innerItem">
			<view class="mineItem">
				<view class="mineTit">头像</view>
				<view class="hasFlex posRel">
					<!-- <button class="imgBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button> -->
					<image class="samePar" :src="mainImg == '' ? '../../../static/images/defHead.png' : getCloudFilePath(mainImg)"></image>
					<!-- <view class="iconfont icon-gengduo"></view> -->
				</view>
			</view>
			<view class="mineItem" @tap="goSetRealName">
				<view class="mineTit">真实姓名</view>
				<view class="hasFlex">
					<view class="currVersion">{{realName}}</view>
					<view class="iconfont icon-gengduo" v-if="realName == ''"></view>
				</view>
			</view>
			<view class="mineItem">
				<view class="mineTit">账号</view>
				<view class="hasFlex">
					<view class="currVersion">{{account}}</view>
				</view>
			</view>
			<view class="mineItem" @tap="goSetNickName">
				<view class="mineTit">昵称</view>
				<view class="hasFlex">
					<view class="currVersion">{{nickName}}</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="mineItem" @tap="goSetSex">
				<view class="mineTit">性别</view>
				<view class="hasFlex">
					<view class="currVersion">{{sexTxt}}</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
		</view> 
		<button class="comBtn" @tap="logoOut">退出登录</button>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable" @closeAlertComponent="closeAlertComponent">
			<view class="alertContent">是否确认退出登录?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancel">取消</view>
				<view class="sureBtn" @tap="sureLogout">确认</view> 
			</view>
		</common-alert>
	</view>
</template>

<script>
	import { upSex,upUserHead  } from '@/api/mine/index'
	export default {
		data(){
			return{
				mainImg:'',
				showAlertFlag:false,
				maskClosable:true,
				//currOpt:'',//logOut clearCache
				sizeCache:0,
				nickName:'',
				mobile:'',
				sexTxt:'',
				account:'',
				realName:'',
			}
		},
		onLoad(options){
			var basicInfo = uni.getStorageSync('basicInfo');
			this.sexTxt = basicInfo.sex;
			this.realName = basicInfo.realName;
			this.nickName = basicInfo.netName;
			this.mobile = basicInfo.mobile;
			this.mainImg = basicInfo.userPortrait;
			this.account = basicInfo.account;
		},
		onUnload(){
			uni.removeStorageSync('basicInfo');
		},
		methods:{
			goSetRealName(){
				if(this.realName == ''){
					uni.navigateTo({
						url:'/pages/subMine/setNickName/setRealName'
					})
				}
			},
			onChooseAvatar(e){
				const { avatarUrl } = e.detail;
				this.upLoadFile(avatarUrl);
			},
			upLoadFile(avatarUrl){
				var field = {pathName:'user/head',relativePathTag:1},that = this;
				var url = this.serverUrl + '/cosFile/cosUpload';
				console.log(url)
				uni.showLoading({
					title: '正在上传...',
					icon: 'loading',
					mask: true
				})
				uni.uploadFile({
					url: url,
					filePath: avatarUrl,
					header:{
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					name: 'file', 
					formData:field,
					success:(res1)=>{
						uni.hideLoading();
						if(JSON.parse(res1.data).code == 200){
							var sucSrc = JSON.parse(res1.data).datas.filePath;
							this.mainImg = this.cloudUrl + sucSrc;
							this.upUserHead(sucSrc);
						}else if(JSON.parse(res1.data).code == 1000){
							uni.showToast({
								title : '服务器错误',
								icon : 'none'
							});
						}
					}
				})
			},
			upUserHead(sucSrc){
				var field = {headImg:sucSrc};
				let tmpSucSrc = this.cloudUrl + sucSrc;
				upUserHead(field).then(res=>{
					this.util.showToastSuc('设置成功'); 
					if(!uni.getStorageSync('IMRefuseNum')){//IM未欠费
						//更新即时通讯服务器上的头像
						uni.$TUIKit.updateMyProfile({avatar: tmpSucSrc}).then(res => {}).catch(err=>{});
					}
					let pages = getCurrentPages();
					let prevPage = pages[pages.length-2];
					prevPage.$vm.basicInfo.userPortrait = tmpSucSrc;
					
				}).catch(err=>{
					
				});
			},
			goSetSex(){
				var _this = this;
				uni.showActionSheet({
					title:'请选择性别',
					itemList: ['男','女'],
					success: (res)=>{
						if(res.tapIndex == 0){
							this.sexTxt = '男';
						}else if(res.tapIndex == 1){
							this.sexTxt = '女';
						}
						this.upSex();
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				});
			},
			upSex(){
				var field = {sex:this.sexTxt}
				upSex(field).then(res=>{}).catch();
			},
			goSetNickName(){
				uni.navigateTo({
					url:'../setNickName/setNickName'
				})
			},
			sureLogout(){
				this.util.showToastSuc('退出成功');
				this.User.clearStorage();
				this.showAlertFlag = false;
				let pages = getCurrentPages();
				let prevPage = pages[pages.length-2];
				prevPage.$vm.inviteUserAccount = '';
				/* 执行即时通讯退出接口 */
				//logger.log('| TUI-User-Center | mine  | quit-logout ');
				//uni.$TUIKit.logout();
				uni.$emit('changeLoginStaToLogout');
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500);
			},
			closeAlertComponent(){
				this.showAlertFlag = false;
			},
			cancel(){
				this.showAlertFlag = false;
			},
			logoOut(){
				this.showAlertFlag = true;
			}
		}
	}
</script>

<style lang='scss'>
	@import url("/static/css/common/alert.css");
	@import '@/static/scss/helpCen.scss';
	.imgBtn{
		width: 200rpx;
		position: absolute;
		left: -90rpx;
		top: 0;
		opacity: 0;
	}
	.comBtn{
		width: 600rpx;
		border-radius: 50rpx;
		margin: 100rpx auto 0;
		background: #fff;
		color: $pss-text-color8;
	}
	.samePar{
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}
	page{
		background: $pss-bg-primary;
	}
</style>